<template>
  <!-- 课程服务(首页)-->
  <div class="container-fluid">
    <div class="row carousel slide" data-ride="carousel">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img
            src="https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/banner2-4.png"
            class="d-block w-100"
            alt="..."
          >
        </div>
        <div class="Suspension">
          <p class="cla">课程体系</p>
          <ul class="kuang">
            <li class="alone" @click="open">
              <p class="child">在线学习</p>
            </li>
            <li class="alone1">
              <router-link class="childo" to="/Campus">
                <p class="child">走进校园</p>
              </router-link>
            </li>
            <li class="alone2">
              <router-link class="childo" to="/loginCourse">
                <p class="child child2">科教基地</p>
              </router-link>
            </li>
            <li class="alone3" @click="open">
              <p class="child">假期研学</p>
            </li>
            <li class="alone4" @click="open">
              <p class="child">赛事活动</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="intermediate row">
      <div class="intermediate-in">
        <div class="sty"></div>
        <div class="ar">
          <ul class="pai">
            <li class="hengpai">
              <div class="zichuan">
                <div class="img1">
                  <img
                    class="add"
                    src="https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/guanwang-gif/1-%E5%AD%A9%E5%AD%90%E4%BB%AC%E6%AD%A3%E5%9C%A8%E7%BC%96%E7%A8%8B%E5%AD%A6%E4%B9%A0.gif"
                    alt
                  >
                </div>
                <p class="Introduction">
                  <img
                    src="https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/1.11.png"
                    alt
                  >
                </p>
              </div>
            </li>
            <li class="hengpai cancel">
              <div class="zichuan">
                <div class="img1">
                  <img
                    class="add"
                    src="https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/guanwang-gif/2-%E6%99%BA%E8%83%BD%E7%81%B5%E5%B7%A7%E6%89%8B.gif"
                    alt
                  >
                </div>
                <p class="Introduction">
                  <img
                    src="https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/1.13.png"
                    alt
                  >
                </p>
              </div>
            </li>
          </ul>
          <ul class="pai">
            <li class="hengpai">
              <div class="zichuan">
                <div class="img1">
                  <img
                    class="add"
                    src="https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/guanwang-gif/3-%E6%97%A0%E4%BA%BA%E9%A9%BE%E9%A9%B6%E6%9C%BA%E5%99%A8%E4%BA%BA.gif"
                    alt
                  >
                </div>
                <p class="Introduction">
                  <img
                    src="https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/1.12.png"
                    alt
                  >
                </p>
              </div>
            </li>
            <li class="hengpai cancel">
              <div class="zichuan">
                <div class="img1">
                  <img
                    class="add"
                    src="https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/guanwang-gif/6-%E6%9C%BA%E5%99%A8%E8%87%82%E5%88%86%E6%8B%A3.gif"
                    alt
                  >
                </div>
                <p class="Introduction">
                  <img src="https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/1.4.png" alt>
                </p>
              </div>
            </li>
          </ul>
          <ul class="pai">
            <li class="hengpai">
              <div class="zichuan">
                <div class="img1">
                  <img
                    class="add"
                    src="https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/guanwang-gif/5-%E6%89%91%E7%BF%BC%E9%A3%9E%E8%A1%8C%E5%99%A8.gif"
                    alt
                  >
                </div>
                <p class="Introduction">
                  <img src="https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/1.5.png" alt>
                </p>
              </div>
            </li>
            <li class="hengpai cancel">
              <div class="zichuan">
                <div class="img1">
                  <img
                    class="add"
                    src="https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/guanwang-gif/4-%E4%BA%BA%E8%84%B8%E8%AF%86%E5%88%AB.gif"
                    alt
                  >
                </div>
                <p class="Introduction">
                  <img src="https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/1.6.png" alt>
                </p>
              </div>
            </li>
          </ul>
          <ul class="pai">
            <li class="hengpai">
              <div class="zichuan">
                <div class="img1">
                  <img
                    class="add"
                    src="https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/guanwang-gif/7-%E6%97%A0%E4%BA%BA%E6%9C%BA.gif"
                    alt
                  >
                </div>
                <p class="Introduction">
                  <img src="https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/1.7.png" alt>
                </p>
              </div>
            </li>
            <li class="hengpai cancel">
              <div class="zichuan">
                <div class="img1">
                  <img
                    class="add"
                    src="https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/guanwang-gif/8-%E4%BB%BF%E7%94%9F%E6%9C%BA%E6%A2%B0%E7%8B%97.gif"
                    alt
                  >
                </div>
                <p class="Introduction">
                  <img src="https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/1.8.png" alt>
                </p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import $ from "jquery";
export default {
  name: "loginCourse",
  mounted(){
    $(".alone2").click(function() {
      scrollTo(0, 425);
      $(".child2")
        .addClass("stage1")
        .siblings()
        .removeClass("stage1");
    });
  },
  methods:{
     open() {
        this.$message('暂未开放，敬请期待');
      }
  }

};
</script>

<style scoped>
.w-100 {
  min-width: 1200px;
}

.banner {
  min-width: 1200px;
  height: 1093px;
  background-image: url(/public/images/qietu.png);
  background-repeat: no-repeat;
  background-position: center;
}
/* 年龄阶段每个图片样式（8个） */
.age {
  width: 83px;
  height: 53px;
  margin-top: 535px;
  margin-left: 373px;
  text-align: center;
}
.age1 {
  width: 83px;
  height: 53px;
  margin-top: 490px;
  margin-left: 71px;
  text-align: center;
}
.age2 {
  width: 83px;
  height: 53px;
  margin-top: 446px;
  margin-left: 71px;
  text-align: center;
}
.age3 {
  width: 83px;
  height: 53px;
  margin-top: 402px;
  margin-left: 72px;
  text-align: center;
}
.age4 {
  width: 83px;
  height: 53px;
  margin-top: 358px;
  margin-left: 67px;
  text-align: center;
}
.age5 {
  width: 83px;
  height: 53px;
  margin-top: 312px;
  margin-left: 70px;
  text-align: center;
}
.age6 {
  width: 83px;
  height: 53px;
  margin-top: 312px;
  margin-left: 70px;
  text-align: center;
}
.age7 {
  width: 83px;
  height: 53px;
  margin-top: 312px;
  margin-left: 71px;
  text-align: center;
}
/* 向左转动20度 */
.zhuan_left {
  transform: rotate(-10deg);
  -webkit-transform: rotate(-10deg);
}
/* 向右转动20度 */
.zhuan_right {
  -webkit-transform: rotate(10deg);
  transform: rotate(10deg);
}
.stage {
  transform-origin: center bottom;
  -webkit-transform-origin: center bottom;
  -webkit-transition: all 1s ease-in-out 0s;
  -o-transition: all 1s ease-in-out 0s;
  -moz-transition: all 1s ease-in-out 0s;
  transition: all 1s ease-in-out 0s;
}
.button {
  height: 757px;
  min-width: 1200px;
  background-image: url(/public/images/font-family.png);
  background-position-x: center;
  background-position-y: 130px;
  background-repeat: no-repeat;
}

.city {
  height: 900px;
  min-width: 1200px;
  background-image: url(/public/images/part5.png);
  background-repeat: no-repeat;
  background-position: center;
}

.pai {
  display: flex;
  position: relative;
  margin-bottom: 0;
}

.pai li {
  -webkit-box-flex: 1;
  flex-grow: 1;
  margin-right: 132px;
  margin-bottom: 88px;
}
.pai .cancel {
  margin-right: 0;
}
.button-lt {
  width: 42px;
  height: 42px;
  background: #767a7f;
  margin-top: 100px;
  float: left;
}

.button-gt {
  width: 42px;
  height: 42px;
  background: #767a7f;
  margin-top: 100px;
  float: right;
}

.Introduction {
  text-align: center;
  margin-top: 13px;
  font-family: cursive;
  font-size: 30px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 46px;
  letter-spacing: 6px;
  color: #222222;
}

.img1 {
  width: 534px;
  height: 300px;
  background: pink;
  margin: 0 auto;
}

.add {
  width: 534px;
  height: 300px;
}

.hengpai {
  float: left;
  list-style-type: none;
  height: 315px;
}

.all {
  height: 325px;
  background: #ffffff;
  margin-top: 312px;
  margin-left: auto;
  margin-right: auto;
}

#haha a {
  color: #ffffff;
  text-decoration: none;
}

.xiaoyu {
  position: absolute;
  line-height: 36px;
  margin: 0 auto;
  margin-left: 8px;
  font-size: 37px;
}

.dayu {
  position: absolute;
  line-height: 36px;
  margin: 0 auto;
  margin-left: 8px;
  font-size: 37px;
}

.screen {
  width: 963px;
  height: 335px;
  overflow-x: hidden;
}

#haha .hehe {
  width: 76px;
  height: 5px;
  margin-right: 22px;
}

.Detai2-6 {
  width: 240px;
  height: 43px;
  background-color: #3d79e4;
  border-radius: 3px;
}

.height900 {
  height: 900px;
  min-width: 1200px;
}

.clearfix {
  clear: both;
}

.pull-left {
  float: left !important;
}

.pull-right {
  float: right !important;
}
.intermediate {
  height: 3550px;
  background: #eeeeee;
  min-width: 1200px;
}
.intermediate-in {
  width: 1200px;
  margin: 0 auto;
  height: 100%;
}
.sty {
  width: 100%;
  height: 1933px;
  background-image: url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/JJJJ.png");
}
.ar {
  width: 100%;
  height: 1612px;
  overflow: hidden;
}
.carousel-inner {
  min-width: 1200px;
}
.Suspension {
  position: fixed;
  z-index: 1;
  width: 136px;
  top: 37%;
  left: 0px;
  margin: auto;
  margin-left: 10px;
  background: no-repeat
    url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/xuanfu3.0.png");
}
.kuang {
  margin-top: 59px;
}
.alone {
  text-align: center;
  color: #ffffff;
  margin-bottom: 0px;
  height: 35px;
  line-height: 35px;
  cursor: pointer;
}
.alone:hover {
  background: #c2e0ff;
  color: #317dd2;
}
.alone1 {
  text-align: center;
  color: #ffffff;
  margin-bottom: 0px;
  height: 38px;
  line-height: 38px;
  cursor: pointer;
}
.alone1:hover {
  background: #c2e0ff;
  color: #317dd2;
}
.alone2 {
  text-align: center;
  color: #ffffff;
  margin-bottom: 0px;
  height: 39px;
  line-height: 39px;
  cursor: pointer;
}
.alone2:hover {
  background: #c2e0ff;
  color: #317dd2;
}
.alone3 {
  text-align: center;
  color: #ffffff;
  margin-bottom: 0px;
  height: 39px;
  line-height: 39px;
  cursor: pointer;
}
.alone3:hover {
  background: #c2e0ff;
  color: #317dd2;
}
.alone4 {
  text-align: center;
  color: #ffffff;
  margin-bottom: 0px;
  height: 39px;
  line-height: 39px;
  cursor: pointer;
}
.alone4:hover {
  background: #c2e0ff;
  color: #317dd2;
  border-radius: 0 0 4px 8px;
}
.child {
  font-family: "黑体";
  font-size: 16px;
  margin-bottom: 0px;
  text-shadow: 1px 1px 4px #2e70bf;
}
.child:hover{
  text-shadow: 0px 0px 0px #2e70bf;
}
.childo {
  color: #ffffff;
}
.childo:hover {
  color: #317dd2;
}
.cla {
  font-family: "gaoduanhei";
  font-size: 20px;
  margin-bottom: -33px;
  text-align: center;
  margin-top: 5px;
  color: #ffffff;
  line-height: 26px;
  text-shadow: 1px 1px 4px #d98a02;
}
@font-face {
  font-family: gaoduanhei;
  src: url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/gaoduanhei.TTF");
  src: url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/gaoduanhei.TTF")
      format("woff"),
    url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/gaoduanhei.TTF")
      format("truetype"),
    url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/gaoduanhei.TTF")
      format("svg");
}
.stage1 {
  color: orange;
}
</style>
